<template>
  <div>
    <h3>发表评论 --- {{ newsid }}</h3>
    <hr />
    <textarea
      placeholder="请输入要评论的内容（最多输入120字）"
      maxlength="120"
      v-model="newComment"
    ></textarea>
    <mt-button type="primary" size="large" @click="postComment"
      >发表评论</mt-button
    >

    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in cmtlist" :key="i">
        <div class="cmt-item-title">
          第{{ i + 1 }}楼&nbsp;用户：{{ item.user_name }}&nbsp;发表时间：{{
            item.add_time | dateFormat
          }}
        </div>
        <div class="cmt-item-body">{{ item.content }}</div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain @click="loadMore"
      >加载更多</mt-button
    >
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      page: 1,
      cmtlist: [],
      newComment: "",
      delIndex: 0,
      delNum: 0,
    };
  },
  created() {
    this.getCommentByPage();
  },
  methods: {
    async getCommentByPage() {
      // 根据页数来获取评论的数据
      const { data } = await this.$http.get(
        "api/getcomments/" + this.newsid + "/?pageindex=" + this.page
      );
      if (data.status === 0) {
        // 在getCommentByPage而不在loadMore处理cmtlist数组的原因是：getCommentByPage方法是异步的，如果在loadMore处理的话，用户能够明显注意到尾部有评论被删除，因为从服务器加载评论需要时间，而删除评论的操作在本地进行，因此这个时间差可以很明显被用户发现；但若是在getCommentByPage请求数据成功后，在拼接前进行删除，此时删除拼接操作均在本地进行，用户不易察觉，因此可以提高用户体验
        this.cmtlist.splice(this.delIndex, this.delNum);
        this.cmtlist = this.cmtlist.concat(data.message);
      }
    },
    loadMore() {
      // 在用户发表完n条评论后，并且在未刷新页面的情况下点击加载更多按钮时，此时从服务器获取的数据在与this.cmtlist拼接后会出现评论重复显示的问题，因为我们在提交评论后并未从服务器重新获取评论数据而是手动拼接了评论列表在本地进行显示
      // 因此需要合理设定this.page，并且在对this.cmtlist进行重新拼接前对尾部数据进行删除操作

      // 加载更多评论前，先将this.cmtlist数组尾部会与新获取的评论数据重复的部分删除，重复的长度为当前长度除10后的余数
      this.delIndex = Math.floor(this.cmtlist.length / 10) * 10;
      this.delNum = this.cmtlist.length % 10;
      // this.cmtlist.splice(delIndex, delNum);

      // 确定在点击加载更多按钮时，需要从服务器加载的评论页码，如果当前显示11条，就需要加载服务器第2页中的评论
      this.page = Math.floor(this.cmtlist.length / 10) + 1;

      // 注意，getCommentByPage这个方法是异步的，要注意代码执行顺序
      this.getCommentByPage();
    },
    async postComment() {
      // 检测评论内容是否为空
      if (this.newComment.trim().length <= 0) {
        Toast("评论为空，请重新输入！");
      } else {
        // 提交评论到服务器
        const { data } = await this.$http.post(
          "api/postcomment/" + this.newsid,
          {
            content: this.newComment.trim(),
          }
        );

        if (data.status === 0) {
          // 刷新评论列表
          this.cmtlist.unshift({
            add_time: new Date(),
            content: this.newComment.trim(),
            user_name: "匿名用户",
          });
          this.newComment = "";
        }
      }
    },
  },
  props: ["newsid"],
};
</script>

<style lang="scss" scoped>
textarea {
  font-size: 14px;
}
.cmt-list {
  margin: 3px 0;
  .cmt-item {
    line-height: 30px;
    .cmt-item-title {
      font-size: 13px;
      background-color: #d9dcd9;
    }
    .cmt-item-body {
      font-size: 14px;
      text-indent: 2em;
    }
  }
}
</style>